<template>
  <div class="wot-field-select">
    <el-button type="primary" @click="visible = true">
      {{ multLang('添加字段') }}
    </el-button>
    <c-dialog
      custom-class="wot-field-select-dialog"
      width="680px"
      :title="multLang('添加字段')"
      :visible.sync="visible"
      @open="open"
      @close="close"
    >
      <c-row margin class="wot-field-select-search">
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="query"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="query">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <c-table
        ref="table"
        primary-key="field_form_code"
        select
        :data="table.data"
        :col="col"
        @row-click="clickRow"
        @select-change="changeSelect"
      ></c-table>
      <template #footer>
        <el-button @click="cancel">
          {{ multLang('btn_cancel_a') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ multLang('btn_sure_a') }}
        </el-button>
      </template>
    </c-dialog>
  </div>
</template>
<script>
import {
  getTemplateFiledSelect,
  getProcessFieldSelect
} from '@/http/api/v1/wot'
export default {
  name: 'FieldSelect',
  components: {},
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    isProcess: { type: Boolean, default: false }
  },
  data() {
    return {
      visible: false,
      keyword: '',
      rules: {},
      table: {
        data: []
      }
    }
  },
  computed: {
    workColumnMap() {
      return this.optionMap('work_column')
    },
    blockMap() {
      return this.optionMap('block')
    },
    operationPermissionMap() {
      return this.optionMap('operation_permission')
    },
    col() {
      return [
        {
          label: 'title_name_ab_r',
          prop: 'field_code'
        },
        {
          label: 'title_name_c',
          prop: 'field_name',
          formatter: (row, { property }) => this.multLang(row[property])
        },
        {
          label: 'title_category_ah',
          prop: 'field_view_type',
          formatter: (row, { property }) => this.workColumnMap[row[property]]
        },
        {
          label: 'title_qe',
          prop: 'field_section_type',
          formatter: (row, { property }) => this.blockMap[row[property]]
        },
        {
          label: 'title_aas_b',
          prop: 'field_remark'
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'work_column' })
    this.setOption({ key: 'block' })
    this.setOption({ key: 'operation_permission' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    clickRow(row) {
      this.$refs.table.rowSelect(row)
    },
    changeSelect(val) {
      this.table.select = val
    },
    open() {
      this.query()
    },
    close() {
      this.table.data = []
    },
    query() {
      const { work_template_code, node_id, node_type, pref_id } = this.data
      if (this.isProcess) {
        node_id &&
          node_type &&
          pref_id &&
          getProcessFieldSelect({
            node_id,
            node_type,
            pref_id,
            keywordSearch: this.keyword
          }).then(({ data }) => {
            this.table.data = data || []
          })
      } else {
        work_template_code &&
          getTemplateFiledSelect({
            keywordSearch: this.keyword,
            work_template_code
          }).then(({ data }) => {
            this.table.data = data || []
          })
      }
    },
    cancel() {
      this.visible = false
    },
    submit() {
      this.$emit('submit', this.table.select)
      this.cancel()
    }
  }
}
</script>
<style lang="scss">
.wot-field-select {
  &-dialog {
    height: 560px;
  }
  &-search {
    margin-bottom: 10px;
  }
}
</style>
